<template>
    <div class="login-box" v-loading="isLoginBoxLoading">
        <div class="login-box-title">思普云运维系统</div>
        <el-form :model="loginFormParams" :rules="loginRules" ref="loginFormParams" :status-icon="true">
            <el-form-item prop="USERNAME">
                <el-input type="text" placeholder="账号/手机号" v-model="loginFormParams.USERNAME">
                    <i slot="prefix" class="fa fa-user" aria-hidden="true"></i>
                </el-input>
            </el-form-item>
            <el-form-item prop="PASSWORD">
                <el-input type="PASSWORD" placeholder="密码" v-model="loginFormParams.PASSWORD">
                    <i slot="prefix" class="fa fa-lock" aria-hidden="true"></i>
                </el-input>
            </el-form-item>
        </el-form>
        <div class="login-box-options">
            <div class="login-box-option">
                <el-checkbox v-model="isRememberMe" @change="handleRememberMeChange">记住我</el-checkbox>
                <el-tooltip class="item" effect="dark" content="请联系管理员为您设置新密码" placement="top">
                    <el-button type="text">忘记密码?</el-button>
                </el-tooltip>
            </div>
        </div>
        <div class="login-box-buttons">
            <div class="login-box-button">
                <el-button type="primary" @click="handleLoginTriggered()">登 录</el-button>
            </div>
        </div>
        <div class="suspension">
            <div class="suspension-box">
                <a href="#" class="a a-android" @mouseenter="visible" @mouseleave="invisible"><i class="fa fa-android"></i>  </a>
                <!-- <div id="qrcode" ></div> -->
                <div class="d d-android d-block" v-show="showCode">
                    <div id="qrcode" style="background-color: white;padding: 10px;"></div>
                    <div style="text-align: center;background-color: white;color:#333;">扫码下载APP</div>
                </div>
                <!-- <div class="d d-ios" style="display: none;"> -->
                    <!-- <div id="qrcode_ios" style="background-color: white;padding: 10px;"></div> -->
                    <!-- <div style="text-align: center;background-color: white">扫码下载APP</div> -->
                <!-- </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations, mapActions } from 'vuex'
import QRCode  from "qrcodejs2"

export default {
    name: 'LoginBox',
    data () {
        return {
            isLoginBoxLoading: false,  // 加载 - LoginBox
            isRememberMe: false,  // 是否记住我
            // 表单参数 - login
            loginFormParams: {
                USERNAME: '',  // 账号/手机号
                PASSWORD: '',  // 密码
                remember: ''  // 是否记住 -默认为1
            },
            // 校验规则 - login
            loginRules: {
                USERNAME: [
                    {required: true, message: '请输入账号/手机号', trigger: 'blur'}
                ],
                PASSWORD: [
                    {required: true, message: '请输入密码', trigger: 'blur'}
                ]
            },
            showCode: false,
            link: 'http://erp.idosp.net/operationapp/oppAckage.apk'
        }
    },
    methods: {
        ...mapMutations(['mutaDeleteUSERNAME', 'mutaDeleteremember', 'mutaUpdateRememberMe']),
        ...mapActions(['actLogin']),
        // 初始化 - LoginBox
        initLoginBox() {
            console.log(this.$store.state)
            this.isRememberMe = this.$store.state.login.isRememberMe
            this.loginFormParams.USERNAME = this.$store.state.login.USERNAME
            if(this.isRememberMe) {
                this.loginFormParams.PASSWORD = this.$store.state.login.PASSWORD
                this.loginFormParams.remember = this.$store.state.login.remember
            }
        },
        // 处理改变记住我
        handleRememberMeChange(value) {
            this.mutaUpdateRememberMe({isRememberMe: value})
        },
        // 处理触发登录
        handleLoginTriggered() {
            this.$refs.loginFormParams.validate((result) => {
                if(result) {
                    this.isLoginBoxLoading = true
                    this.actLogin({params: this.loginFormParams}).then(response => {
                        this.isLoginBoxLoading = false
                    }).catch(error => {
                        this.isLoginBoxLoading = false
                    })
                }
            })
        },
        qrcode () {
            let that = this;
            let qrcode = new QRCode('qrcode', {
                width: 108,
                height: 108,        // 高度
                text:  this.link,   // 二维码内容
                // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
                // background: '#f0f',   // 背景色
                // foreground: '#ff0'    // 前景色
            })
        },
        visible:function(){
            this.showCode = true;
        },
        invisible:function(){
            this.showCode = false;
        }
    },
    created () {
        this.initLoginBox()
        document.onkeydown = e=>{
            var key = window.event.keyCode;
            if(key == 13){
                this.handleLoginTriggered()
            }
        }
        this.$nextTick (function () {
            this.qrcode();
        })
    },
    components: { QRCode }
}
</script>

<style scoped>
.login-box {
    width: 330px;
    height: 408px;
    background-color: #ffffff;
    border: 1px solid #dcdfe6;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center
}
.login-box-title {
    height: 30px;
    line-height: 30px;
    color: #232123;
    font-size: 24px;
    text-align: center;
    padding: 10px 0 20px 0
}
.el-form {
    padding-bottom: 10px
}
.el-form-item {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center
}
.el-form-item .el-input {
    width: 290px
}
.el-form-item .el-input i {
    width: 15px;
    height: 100%;
    font-size: 20px;
    text-align: center;
    margin-left: 5px;
    display: flex;
    align-items: center
}
.fa-building {
    font-size: 16px !important
}
.login-box-option {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center
}
.login-box-option .el-checkbox {
    color: #232123
}
.login-box-option .el-button {
    padding: 0;
    margin: 0
}
.login-box-buttons {
    padding-bottom: 10px
}
.login-box-button {
    padding: 10px 20px 0
}
.login-box-button .el-button {
    width: 290px;
    border-radius: 0;
    margin: 0
}
.suspension {
    position: fixed;
    right: 0;
    top: 50%;
    width: 60px;
    height: 200px;
}
.suspension-box {
    position: relative;
    float: right;
}
.suspension .a {
    display: block;
    width: 35px;
    height: 25px;
    background-color: #1d1d1d;
    margin-bottom: 4px;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    padding: 10px 0;
    text-align: center;
}
.suspension .a:hover {
    background-color: #1d1d1d;
}
.suspension .a i {
    font-size: 20px;
    color: white;
}
.suspension-box .d {
    position: absolute;
    width: 128px;
    right: 35px;
    top: 0;
    border: 1px solid #E0E1E5;
    border-radius: 5px;
}
.suspension-box .d-android {
    /* top: 48px; */
}
.suspension-box .d-ios {
    top: 48px;
}
</style>
